<template>
	<div class="bg">
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }"><i class="el-icon-house"></i>我的桌面</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div>欢迎：<span style="color: red;">{{LoginName}}</span>&nbsp;!&nbsp;{{date}}</div>
			<p>明天会更好！</p>
		</el-card>
		<el-card v-if="IsShow" style="margin-top: 10px;">
			<div>打卡签到</div>
			<p>
				<el-button type="success" size="medium" @click="CheckIn" round plain>上班打卡</el-button>
				<el-button type="info" size="medium" @click="CheckOut" round plain>下班打卡</el-button>
			</p>
		</el-card>
	</div>
</template>

<script>
</script>

<style Lang="less">

</style>
<script>
	export default {
		data() {
			return {
				user: {
					Id: parseInt(window.sessionStorage.getItem('token'))
				},
				LoginName: window.sessionStorage.getItem('Name'),
				date: new Date(),
				IsShow: false
			}
		},
		methods: {
			async getRole() {
				const {
					data: res
				} = await this.$http.post('api/UserChecks/GetRole', this.user)
					this.IsShow = res.IsShow
			},
			async CheckIn() {
				const {
					data: res
				} = await this.$http.post('api/UserChecks/Check', this.user)
				if (res.code == 0) {
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			},
			async CheckOut() {
				const {
					data: res
				} = await this.$http.post('api/UserChecks/CheckOut', this.user)
				if (res.code == 0) {
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			}
		},
		mounted() {
			let that = this;
			this.timer = setInterval(function() {
				that.date = new Date().toLocaleString();
			});
		},
		beforeDestroy: function() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		created: function() {
			this.getRole();
		}
	}
</script>
